<!--  -->
<template>
    <div class="sort-container">
        <div class="sort-wrap">
            <div class="item" @click="getMore('VIP')">
                <img src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/VIP%20%281%29.png" />
                <span class="title">كىنولار VIP</span>
            </div>
            <div class="item" @click="getMore('COST')">
                <img src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/shortvideo.png" />
                <span class="title">ھەقلىق كىنو</span>
            </div>
            <div class="item" @click="getMore('MOVIE')">
                <img src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/video.png" />
                <span class="title">كىنو</span>
            </div>
            <div class="item" @click="getMore('TV')">
                <img src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/tv.png" />
                <span class="title">قىسىملىق</span>
            </div>
            <div class="item" @click="getMore('FUN')">
                <img src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/gaoxiao2.png" />
                <span class="title">كۈلدۈرگە</span>
            </div>
            <div class="item" @click="getMore('NETTV')">
                <img src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/netTv.png" />
                <span class="title">تور فىلىملىرى</span>
            </div>
            <div class="item" @click="getMore('VARIETY')">
                <img src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/zongyi.png" />
                <span class="title">سەنئەت</span>
            </div>
            <div class="item" @click="getMore('CARTOON')">
                <img src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/cartoon.png" />
                <span class="title">كارتون</span>
            </div>
            <div class="item" @click="getMore('LOCAL')">
                <img src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/other.png" />
                <span class="title">ئۆزتىل</span>
            </div>
            <div class="item" @click="getMore('FREE')">
                <img src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/free.png" />
                <span class="title">ھەقسىز كىنو</span>
            </div>
        </div>
    </div>
</template>

<script>
import { shareFrend, shareMoments } from "@/utils";
export default {
    data() {
        return {};
    },
    methods: {
        getMore(sort) {
            if (sort == "VIP") {
                this.$router.push({
                    name: "VideoList",
                    query: { from: "VIP" }
                });
            }
            else if (sort == "COST") {
                this.$router.push({
                    name: "VideoList",
                    query: { from: "COST" }
                });
            }
            else if (sort == "FREE") {
                this.$router.push({
                    name: "VideoList",
                    query: { from: "FREE" }
                });
            }
            else {
                this.$router.push({
                    name: "VideoList",
                    query: { from: "sort", sort }
                });
            }
            this.$store.state.sortChange++
        }
    },
    mounted() {
        shareMoments(this)
        shareFrend(this)
    }
};
</script>
<style lang='scss' scoped>
.sort-container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    background-color: #fff;
    .sort-wrap {
        margin: 0 auot;
        margin-top: 20px;
        width: 96%;
        display: flex;
        padding: 0 1%;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0 auto;
        &::after {
            content: "";
            width: 32%;
            display: block;
            height: 0;
        }
        .item {
            width: 30%;
            height: 250px;
            background-color: #fff;
            box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.15);
            border-radius: 40px;
            margin: 10px 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
            /* &:last-of-type {
                margin-right: 33.9%;
            } */
            &:nth-of-type(3),
            &:nth-of-type(5) {
                img {
                    width: 100px;
                    height: 100px;
                }
            }
            img {
                width: 120px;
                height: 121px;
                margin-bottom: -68px;
            }
            .title {
                color: #666;
                font-size: 34px;
                transform: scaleY(0.8);
            }
        }
    }
}
</style>